<ui:composition xmlns="http://www.w3.org/1999/xhtml"
	xmlns:ui="http://java.sun.com/jsf/facelets"
	xmlns:h="http://java.sun.com/jsf/html"
	xmlns:f="http://java.sun.com/jsf/core"
	template="/templates/main-template.xhtml">
	<ui:define name="title">
    #{msgs.addTitle}
  </ui:define>
	<ui:define name="content">
		<h2>#{msgs.addTitle}</h2>
		<p>#{msgs.pleaseComplete}</p>
		<h:form>
			<h:panelGrid columns="3">
				<h:outputLabel for="title" value="#{msgs.movieTitle}:" />
				<h:inputText value="#{movieView.movie.titlu}" required="true" style="width: 300px"
					requiredMessage="You must enter a title" id="title" name="title" />
				<h:message for="title" styleClass="error" />
				
				<h:outputLabel for="year" value="#{msgs.movieYear}:" />
				<h:inputText value="#{movieView.movie.anLansare}" required="true" style="width: 300px"
					requiredMessage="You must enter a year" id="year" />
				<h:message for="year" styleClass="error" />
				
				<h:outputLabel for="length" value="#{msgs.movieLength}:" />
				<h:inputText value="#{movieView.movie.durata}" required="true" style="width: 300px"
					requiredMessage="You must enter a length" id="length" />
				<h:message for="length" styleClass="error" />

				<h:outputLabel for="categories" value="#{msgs.movieCategories}:" />
				<h:selectManyListbox id="categories" style="width: 300px"
					value="#{movieView.categoryIds}" required="true"
					requiredMessage="You must enter categories">
					<f:selectItems value="#{movieView.allCategories}" var="cat"
					itemLabel="#{cat.cod}" itemValue="#{cat.id}" />
				</h:selectManyListbox>
				<h:message for="categories" styleClass="error" />
				
				<h:outputLabel for="actors" value="#{msgs.movieActors}:" />
				<h:selectManyListbox id="actors" style="width: 300px"
					value="#{movieView.actorIds}" required="true"
					requiredMessage="You must enter actors">
					<f:selectItems value="#{movieView.allActors}" var="actor"
					itemLabel="#{actor.nume} #{actor.prenume}" itemValue="#{actor.id}"/>
				</h:selectManyListbox>
				<h:message for="actors" styleClass="error" />
				
				<h:commandButton value="#{msgs.addTitle}" action="#{movieView.add}">
					<f:ajax execute="@form" render="@form" />
				</h:commandButton>
			</h:panelGrid>
			<h4><h:outputText value="#{movieView.message}" id="ajaxMessage" /></h4>
		</h:form>

	</ui:define>
</ui:composition>